<template>
	<view v-if="userInfoOpenId!=''">
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">项目班通过率</view>
			</view>
			<view class="qiun-charts">
				<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumn"
				 @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
			</view>
		</view>
	</view>
	<view v-else>
		<nodataView></nodataView>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	import nodataView from '@/components/nodataView/nodataView.vue'
	// import  { isJSON } from '@/common/checker.js';
	import {
		getDataPassing
	} from '@/api/my/service.js';
	var _self;
	var canvaColumn = null;

	export default {
		components:{
			nodataView
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				"chartData": {
					"categories": [],
					"series": [{
						"name": "通过",
						"data": []
					}, {
						"name": "不通过",
						"data": []
					}]
				},
				"datachart": '',
				"userInfoOpenId":''
			}
		},
		onLoad() {
			this.userInfoOpenId = uni.getStorageSync("userInfoOpenId");
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {
				getDataPassing()
					.then(res => {
						_self.resdata();
						_self.datachart = res.data;
						console.log(res.data);
						console.log(_self.chartData)
						for (var i = 0; i < _self.datachart.length; i++) {
							_self.chartData.categories.push(_self.datachart[i].name);
							_self.chartData.series[0].data.push(_self.datachart[i].value);
							// console.log(""+typeof(_self.datachart[i].value));
							let a = 1 - _self.datachart[i].value;
							_self.chartData.series[1].data.push(Number(a.toFixed(2)));
						}
						_self.datachart
						_self.showColumn("canvasColumn", this.chartData);
					}).catch(res => {
						console.log(res)
					})

			},
			resdata() {
				_self.chartData = {
					"categories": [],
					"series": [{
						"name": "通过",
						"data": []
					}, {
						"name": "不通过",
						"data": []
					}]
				}
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					fontSize: 11,
					padding: [5, 15, 15, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						margin: 5,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth: 1
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 3,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 1,
						min: 0,
						max: 1,
						format: (val) => {
							return val.toFixed(0)
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'stack',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					},
				});

			},
			touchColumn(e) {
				canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumn.scrollEnd(e);
				canvaColumn.touchLegend(e, {
					animation: true,
				});
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			changeData() {
				if (isJSON(_self.textarea)) {
					let newdata = JSON.parse(_self.textarea);
					canvaColumn.updateData({
						series: newdata.series,
						categories: newdata.categories,
						scrollPosition: 'right',
						animation: false
					});
				} else {
					uni.showToast({
						title: '数据格式错误',
						image: '../../../static/images/alert-warning.png'
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
